<template>
  <div class="you-like">
    <div class="title">猜你喜欢</div>
    <div class="box">
      <div class="prov" @click="swiper1.slidePrev()">
        <icon name="iconxiangyou" size="16" />
      </div>
      <div class="you-like-list swiper-container">
        <div class="swiper-wrapper">
          <GoodsItem6
            v-for="(item, index) in goodsList"
            :goods="item"
            :key="index"
            class="swiper-slide"
          />
        </div>
      </div>
      <div class="next" @click="swiper1.slideNext()">
        <icon name="iconxiangyou" size="16" />
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import api from "@/api";
import "swiper/swiper.min.css";
import GoodsItem6 from "@/components/GoodsItem/GoodsItem6.vue";
export default {
  name: "YouLike1",
  components: { GoodsItem6 },
  data() {
    return {
      swiper1: null,
      goodsList: [],
    };
  },
  created() {
    api.GOODS_RECOMMEND().then((res) => {
      this.goodsList = res.recommend;
      this.$nextTick(() => {
        this.swiper1 = new Swiper(".you-like-list", {
          slidesPerView: 4,
          spaceBetween: 20,
          loop: true,
        });
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.you-like {
  margin: 40px auto;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #dedede;

  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    height: 44px;
    background: #f3f5f9;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  .box {
    display: flex;
    align-items: center;
    position: relative;
    .next,
    .prov {
      position: absolute;
      width: 31px;
      height: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #d52c1a;
      cursor: pointer;
      &:hover {
        background: #dfdfdf;
      }
    }
    .prov {
      left: 0;
      right: auto;
      i {
        transform: rotate(180deg);
      }
    }
    .you-like-list {
      flex: 1;
      width: 0;
      margin: 0 49px;
    }
  }
}
</style>
